<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border: 1px solid red;
            margin: 0px auto;
        }
        
        td {
            border: 1px solid green;
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <script>
        var colNum = 20;
        var rowNum = 20;

        //头所在
        var selectedIndex = Math.floor(Math.random() * colNum * rowNum)
        //尾巴所在地方
        var tailIndex = [selectedIndex - 4, selectedIndex - 3, selectedIndex - 2, selectedIndex - 1]

        var table = document.createElement('table')
        document.body.appendChild(table)
        var tds = [];
        for (var i = 0; i < colNum; i++) {
            var tr = table.insertRow()
            for (var k = 0; k < colNum; k++) {
                var td = tr.insertCell()
                tds.push(td);

            }
        }
        tds[selectedIndex].style.backgroundColor = "red"
        // tds[tailIndex].style.backgroundColor = "pink"

        tailIndex.forEach(function(n){
            tds[n].style.backgroundColor = "pink"
        })

        document.body.onkeydown = function (e) {
            tailIndex.forEach(function (n) {
                tds[n].style.backgroundColor = "white"
            })
            headMove(e);
            tailIndex.forEach(function (n) {
                tds[n].style.backgroundColor = "pink"
            })
        }
        //控制头移动的的函数
        function headMove(e) {

            function tailMove() {
                for (var i = 0; i < tailIndex.length - 1; i++) {
                    tailIndex[i] = tailIndex[i + 1]
                }
                tailIndex[tailIndex.length - 1] = selectedIndex
            }
            switch (e.keyCode) {
                case 37:
                    //左
                    if (selectedIndex % colNum == 0) {
                        return
                    }
                    tailMove()
                    
                    tds[selectedIndex].style.backgroundColor = 'white'
                    selectedIndex--;
                    tds[selectedIndex].style.backgroundColor = 'red'
                    break;

                case 39:
                    //右
                    if (selectedIndex % colNum == colNum - 1) {
                        return
                    }
                    tailMove()
                  
                    tds[selectedIndex].style.backgroundColor = 'white'
                    selectedIndex++;
                    tds[selectedIndex].style.backgroundColor = 'red'
                    break;
                case 38:
                    //上
                    if (selectedIndex < colNum) {
                        return
                    }
                    tailMove()
                    
                    tds[selectedIndex].style.backgroundColor = 'white'
                    selectedIndex -= colNum;
                    tds[selectedIndex].style.backgroundColor = 'red'
                    break;
                case 40:
                    //下
                    if (selectedIndex / colNum >= colNum - 1) {
                        return
                    }
                    tailMove()
                    
                    tds[selectedIndex].style.backgroundColor = 'white'
                    selectedIndex += colNum;
                    tds[selectedIndex].style.backgroundColor = 'red'
                    break;
            }
        }
    </script>
</body>

</html>